<template>
	<view class="bg-light" style="height: 100%;">
		<!-- 地址信息 -->
		<view class="my-2 bg-white rounded-lg">
			<view class="mx-2 py-2 flex align-center border-bottom border-light-secondary">
				<text class="font flex-shrink" style="width: 20%;">收货人</text>
				<input v-model="form.Name" class="ml-2 font w-100" placeholder-class="font text-muted" placeholder="收货人姓名" type="text" />
			</view>
			<view class="mx-2 py-2 flex align-center border-bottom border-light-secondary">
				<text class="font flex-shrink" style="width: 20%;">手机号码</text>
				<input v-model="form.Phone" class="ml-2 font w-100" placeholder-class="font text-muted" placeholder="收货人手机号" type="text" />
			</view>
			<view class="mx-2 py-2 flex align-center border-bottom border-light-secondary">
				<text class="font flex-shrink" style="width: 20%;">所在地区</text>
				<picker mode="region" class="ml-2 text-muted font" style="width: 100%;" @change="bindAdressChange">
					<view class="text-hover-dark" v-if="Address.length > 0">
						{{Address[0]}}/{{Address[1]}}/{{Address[2]}}
					</view>
					<view v-else>请选择省/市/区</view>
				</picker>
				<uni-icons type="right" class="flex-shrink" color="#828d96" size="16"></uni-icons>
			</view>
			<view class="mx-2 py-2 flex align-center">
				<text class="font flex-shrink" style="width: 20%;">详细地址</text>
				<input v-model="form.Details" class="ml-2 font w-100" placeholder-class="font text-muted" placeholder="请填写详细地址" type="text" />
				<!-- <view @click="getMapLocation()" class="flex flex-shrink align-center">
					<uni-icons type="location-filled" class="flex-shrink" color="#828d96" size="16"></uni-icons>
					<text class="font-sm text-muted">定位</text>
				</view> -->
			</view>
		</view>
		<!-- 设置默认联系人 -->
		<!-- <view class="mb-2 bg-white rounded-lg">
			<view class="mx-2 py-1 flex justify-between align-center">
				<text class="font">设置默认联系人</text>
				<switch class="flex-shrink" style="transform:scale(0.8)" :checked="isdefault" @change="handleswitch()" />
			</view>
		</view> -->
		<!-- 底部按钮 -->
		<view class="fixed-bottom shadow flex align-center justify-between bg-white" style="height: 110rpx;">
			<view @click="handlesubmit()" class="mx-3 w-100 bg-success px-3 py-2 rounded-circle flex justify-center">
				<text class="text-white font">保存并使用</text>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import { mapState } from 'vuex';
	import { validate,validatemobile} from "@/static/js/GeneralUtil.js";
	import { chooseLocation } from "@/static/js/LocationUtil.js";
	import { generalSave } from "@/api/generalBusiness.js";
	import QQMapWX from "@/static/js/qqmap-wx-jssdk.min.js";
	const qqmapsdk = new QQMapWX({key: "2QLBZ-AX5KJ-RUKFZ-DKHUK-FXHP6-JWFZG"});
	export default {
		data() {
			return {
				Address:[],//存放选中地址，
				form:{
					Member_Address_SerialNumber:'',
					Open_ID:'',
					Province:'',
					City:'',
					County:'',
					Details:'',
					Name:'',
					Phone:'',
					Latitude:'',
					Longitude:'',
					Default:'0',
					App_ID:'',
				},
				isdefault:false,//默认
				loading: false,//节流
			}
		},
		computed: {
			...mapState(['Open_ID','App_ID']),
		},
		methods: {
			handleswitch(){//默认收获地址
				this.isdefault = !this.isdefault;
				this.form.Default = this.isdefault?'1':'0';
			},
			bindAdressChange(e){//地区选择器	
				this.Address = e.detail.value;
				this.form.Province = this.Address[0];
				this.form.City = this.Address[1];
				this.form.County = this.Address[2];
			},
			getMapLocation(){//调用地图选择地址
				chooseLocation(({latitude,longitude})=>{
					qqmapsdk.reverseGeocoder({
						location:{latitude,longitude},
						success:(res)=> {
							if(res.status==0){
								const {address_component:{province,city,district,street,street_number}} = res.result;
								this.Address = [province,city,district];
								this.form.Province = province;
								this.form.City = city;
								this.form.County = district;
								this.form.Details = street + street_number;
								this.form.Latitude = latitude;
								this.form.Longitude = longitude;
							}else{
								uni.showToast({
									title:'获取定位地址失败！'
								})
							}
						},
					});
				})
			},
			geocoder(callback){
				// if(!this.form.Latitude||!this.form.Longitude){
				// 	qqmapsdk.geocoder({
				// 		address:this.form.Province + this.form.City + this.form.County + this.form.Details,
				// 		success:(res) =>{
				// 			if(res.status==0){
				// 				const {location:{lat,lng}} = res.result;
				// 				this.form.Latitude = lat;
				// 				this.form.Longitude = lng;
				// 				callback();
				// 			}else{
				// 				callback();
				// 			}
				// 		}
				// 	})
				// }else{
				// 	callback();
				// }
				callback();
			},
			handlesubmit(){//保存并提交使用
				//校验+节流
				if(validate(this.form.Name,'请输入收货人姓名')&&validatemobile(this.form.Phone)
					&&validate(this.form.Province,'请选择收获地址')&&validate(this.form.Details,'请输入详细地址')&&!this.loading){
					uni.showLoading({
						title: "加载中...",
					});
					this.loading = true;//获取地址坐标
					this.form.Open_ID = this.Open_ID;
					this.form.App_ID = this.App_ID;
					this.geocoder(async ()=>{
						//添加地址
						const res = await generalSave({
							Data:JSON.stringify({
								Add:{business_member_address:[this.form]}
							})
						})
						uni.hideLoading();		
						if(res.Status == "success"){
							//判断是否为默认地址
							if(this.isdefault){
								this.form.Member_Address_SerialNumber = res.Data
								uni.setStorageSync("customerAddress",this.form)
							}
							uni.showToast({ title: '提交成功！',icon:'success'})
							const timer = setTimeout(() => {
								clearTimeout(timer)
								uni.navigateBack()//后退
							}, 500)
						}else{
							uni.showToast({ title: '系统繁忙！',icon:'error'})
						}
						this.loading = false;
					})
				}
			}
		}
	}
</script>

<style>
</style>
